<template>
  <div>
    <a-card :bordered="false" style="margin-bottom: 10px">
      <!-- 查询区域 -->
      <div class="table-page-search-wrapper">
        <a-form-model layout="inline" ref="ruleForm" :model="queryParam">
          <z-form-item :datas="fieldArr" :form="queryParam" :gutter="8" :submitAction="{show: true, toggle: true, span: 6}" @onSubmit="onQuery"
            @onReset="onResetForm">
            <template slot="slots-time">
              <a-radio-group buttonStyle="solid" v-model="queryParam.hitType">
                <a-radio-button v-for="(item, key) in options" :key="key" :value="item.value">
                  {{ item.text }}
                </a-radio-button>
              </a-radio-group>
              <span style="margin-left: 10px" v-if="queryParam.hitType === '0'">
                <a-date-picker
                  v-model="queryParam.startTime"
                  placeholder="开始日期"
                  :disabled-date="disabledStartDate"
                  format="YYYY-MM-DD"
                  valueFormat="YYYY-MM-DD"
                  :show-time="false"
                  @openChange="handleOpenChange($event, 'start')"
                />
                <span style="padding:0 4px;">-</span>
                <a-date-picker
                  v-model="queryParam.endTime"
                  placeholder="结束日期"
                  :disabled-date="disabledEndDate"
                  format="YYYY-MM-DD"
                  valueFormat="YYYY-MM-DD"
                  :show-time="false"
                  :open="endOpen"
                  @openChange="handleOpenChange($event, 'end')"
                />
              </span>
            </template>
          </z-form-item>
        </a-form-model>
      </div>
    </a-card>
    <a-card :bordered="false">
      <!-- 操作按钮区域 -->
      <div class="table-operator">
        <div>
          <a-button @click="handleExport">导出</a-button>
        </div>
      </div>
      <!-- 表格展示 -->
      <div class="table-page-content">
        <z-table
          ref="table"
          rowKey="infoId"
          :showAlert="false"
          :showSelection="true"
          :loading="loading"
          :columns="columns"
          :dataSource="pageData"
          @selectedRow="onSelectedRow"
          @change="onTableChange"
        />
      </div>
      <!--弹窗区域-->
      <intelligence-details-modal ref="detailsModal" v-if="modalBool" @dispose="dispose" @close="close" />
      <dispose-modal ref="disposeModal" v-if="modalBool" @ok="modalFormOk" />
    </a-card>
  </div>
</template>

<script>
import * as alarmServiceApi from '@/api/sjsk/alarmService'
import intelligenceDetailsModal from './modules/intelligenceDetailsModal'
import disposeModal from './modules/intelligenceDisposeModal'
import { downLoadFileReader } from '@/utils/export-util/util'

export default {
  components: { intelligenceDetailsModal, disposeModal },
  data() {
    return {
      loading: false,
      endOpen: false,
      modalBool: false,
      selectKeys: [],
      queryParam: {},
      options: [
        { value: '2', text: '今天' },
        { value: '1', text: '昨天' },
        { value: '3', text: '近三天' },
        { value: '4', text: '近七天' },
        { value: '0', text: '自定义' },
      ],
      fieldArr: [
        { label: '模型名称', prop: 'modelId', tagType: 'dict-select', dictOptions: [], span: 6 },
        { label: '号码归属地', prop: 'numberLocation', tagType: 'input', span: 6 },
        { label: '情报号码', prop: 'intelligenceNumber', tagType: 'input', span: 6 },
        { label: '情报状态', prop: 'status', tagType: 'dict-select', dictOptions: [{ text:"请选择", value:"" },{ text:"已处置", value:"1" },{ text:"未处置", value:"0" }], span: 6, toggle: false },
        { label: '命中时间', prop: 'time', toggle: false },
      ],
      columns: [
        { title: '序号', dataIndex: 'order', width: 60, align: 'center',
          customRender: (text, record, index) =>
            `${(this.pageFilter.pageNo - 1) * this.pageFilter.pageSize + (index + 1)}` //序号分页后连续
        },
        {
          title: '情报号码',
          dataIndex: 'intelligenceNumber',
          width: 80,
          align: 'center',
          customRender: (text) => {
            return <j-ellipsis value={text} length={14} />
          },
        },
        {
          title: '号码归属地',
          dataIndex: 'numberLocation',
          width: 80,
          align: 'center',
          customRender: (text) => {
            return <j-ellipsis value={text} length={14} />
          },
        },
        {
          title: '模型名称',
          dataIndex: 'modelName',
          width: 120,
          align: 'center',
          customRender: (text) => {
            return <j-ellipsis value={text} length={14} />
          },
        },
        {
          title: '命中时间',
          dataIndex: 'createTime',
          width: 100,
          align: 'center',
          customRender: (text) => {
            return text?text: '--'
          }
        },
        {
          title: '情报状态',
          dataIndex: 'status',
          width: 80,
          align: 'center',
          customRender: (text) => {
            return (
              <span class={text==1 ? 'text_color_1' : text==0 ? 'text_color_2' : ''}>
                {text==1? '已处置':'未处置'}
              </span>
            )
          },
        },
        {
          title: '更新时间',
          dataIndex: 'updateTime',
          width: 100,
          align: 'center',
          customRender: (text) => {
            return text?text: '--'
          }
        },
        {
          title: '操作',
          width: 120,
          align: 'center',
          dataIndex: 'action',
          customRender: (text, record, index) => {
            return (
              <a-space size={6}>
                <a-button type="link" style={'padding:0'} onClick={(event) => this.clickPush(record)}> 查看 </a-button>
                {record.status==1?
                <a-button type="link" style={'padding:0'} onClick={(event) => this.dispose(record, 'details')}> 处置结果 </a-button>
                :<a-button type="link" style={'padding:0'} onClick={(event) => this.dispose(record, 'add')}> 处置 </a-button>
                }
              </a-space>
            )
          },
        },
      ],
      pageFilter: {
        pageNo: 1,
        pageSize: 10,
      },
      pageData: {}
    }
  },
  created() {},
  async mounted() {
    this.initTabTypes()
    this.onQuery()
  },
  methods: {
    onQuery() {
      this.pageFilter.pageNo = 1
      this.refreshTable()
    },
    onResetForm() {
      this.queryParam = {}
      this.pageFilter.pageNo = 1
      this.pageFilter.pageSize = 10
      this.refreshTable()
    },
    onSelectedRow(keys) {
      this.selectKeys = keys
      this.isDisabled = keys.length > 0 ? false : true
    },
    onTableChange(pagination, pageFilter, sorter) {
      this.pageFilter = Object.assign({}, this.pageFilter, pagination)
      this.refreshTable()
    },
    refreshTable() {
      let queryParam = Object.assign({}, this.queryParam, this.pageFilter)
      this.loading = true
      alarmServiceApi
        .getInformationList(queryParam)
        .then((res) => {
            this.loading = false
          if (res.success) {
            this.pageData = res.result ? res.result : {}
            this.$refs.table.onClearRowKeys()
          } else {
            this.$message.warn(res.message)
          }
        })
        .catch((e) => {
          this.loading = false
          this.$message.warn('请求失败！')
        })
    },
    // 导出
    handleExport(record) {
      let that = this
      let selectList = this.$refs.table.getSelectedRows()
      let idList1 = selectList.map(v => v.infoId).filter(obj => obj !== null && obj !== undefined && obj !== '')
      let idList2 = record && Object.keys(record).length > 0 && record.infoId ? [record.infoId] : []
      let params = Object.assign(
        {},
        {
          ids: selectList.length > 0 ? idList1 : idList2,
          ...this.queryParam
        }
      )
      this.$confirm({
        title: `是否确认导出？`,
        okText: '确定',
        onOk() {
          alarmServiceApi.informationExport(params).then(async res => {
            const fileName = '情报中心列表数据.xlsx'
            await downLoadFileReader(res, fileName)
            that.$refs.table.onClearRowKeys()
          })
        }
      })
    },
    // 初始化模型配置项
    initTabTypes() {
      this.$initDictOptions('model_type').then((res) => {
        if (res.success) {
          let datas1 = [{text: '请选择', value: ''}]
          let datas2 = res.result.map((item, index)=> {
            if (index > 10) {
              return {
                text: item.label,
                value: item.value
              }
            }
          }).filter(obj => obj !== undefined)
          this.fieldArr[0].dictOptions = [...datas1, ...datas2]
        }
      })
    },
    // 弹窗成功接收
    modalFormOk() {
      this.onQuery()
    },
    // 查看
    clickPush(record) {
      this.modalBool = true
      this.$nextTick(()=>{
        this.$refs.detailsModal.show(record)
      })
    },
    // 处置、处置查看
    dispose(record, type) {
      this.modalBool = true
      this.$nextTick(()=>{
        this.$refs.disposeModal.show(record, type)
      })
    },
    close() {
      setTimeout(()=> {
        this.modalBool = false
      }, 500)
    },
    // 命中时间-自定义开始日期【不可选择的日期】
    disabledStartDate(startValue) {
      const endValue = Object.keys(this.queryParam).length > 0 && this.queryParam.endTime
        ? this.$JMoment(this.queryParam.endTime) : null
      if (!startValue || !endValue) {
        return false
      }
      return startValue.valueOf() > endValue.valueOf()
    },
    // 命中时间-自定义结束日期【不可选择的日期】
    disabledEndDate(endValue) {
      const startValue = Object.keys(this.queryParam).length > 0 && this.queryParam.startTime
      ? this.$JMoment(this.queryParam.startTime) : null
      if (!endValue || !startValue) {
        return false
      }
      return startValue.valueOf() >= endValue.valueOf()
    },
    // 命中时间-自定义日期【控制弹层是否展开】
    handleOpenChange(open, status) {
      if (status==='start' && !open) {
        this.endOpen = true
      }
      if (status==='end') {
        this.endOpen = open
      }
    },
  },
}
</script>
<style scoped lang="less">
.text_color_1 {
  color: #70B603;
}
.text_color_2 {
  color: #d9001b;
}
</style>
